---
id: bottomsheet
title: BottomSheet
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/BottomSheet.mdx";
import Play from "@site/playground/BottomSheet/bottomsheet.playground";

<IconsStyle />

Overlay Modal that displays content from the bottom of the screen.
This opens from the bottom of the screen.

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { BottomSheet } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`BottomSheet`}</CodeBlock>
  </div>
</div>

## Usage

<Usage />

## Props

<div class='table-responsive'>

| Name                | Type                        | Default               | Description                                                                          |
| ------------------- | --------------------------- | --------------------- | ------------------------------------------------------------------------------------ |
| `animationDuration` | number                      | `300`                 | Duration of backdrop fade and sheet translate.                                       |
| `animationType`     | `none` \| `slide` \| `fade` | `slide`               | Animation type.                                                                      |
| `backdropStyle`     | View Style                  |                       | Style of the backdrop container.                                                     |
| `containerStyle`    | View Style                  |                       | Style of the bottom sheet's container. Use this to change the color of the underlay. |
| `easing`            | (value: number) => number   | `Easing.elastic(0.7)` | Easing config.                                                                       |
| `isVisible`         | boolean                     | `false`               | Is the modal component shown.                                                        |
| `modalProps`        | ModalProps                  | `{}`                  | Additional props handed to the `Modal`.                                              |
| `onBackdropPress`   | Function                    | `Function`            | Handler for backdrop press.                                                          |
| `scrollViewProps`   | ScrollViewProps             | `{}`                  | Used to add props to Scroll view.                                                    |

</div>

## Playground

<Play />
